<template>
<h1>EL-卡片组件</h1>
  <el-row :gutter="10">
   <el-col :span="6" v-for="i in 4">
     <el-card>
       <img src="mwzz.png" alt="" style="width: 100%;">
       <p>Pokemon-mwzz</p>
       <span style="float: left; padding: 10px">属性:草，毒</span>
       <span style="float:right; padding: 10px">属性:草，毒</span>
     </el-card>
   </el-col>
  </el-row>
  <hr>
  <el-main>
    <div>
      <el-carousel height="140px">
        <el-carousel-item v-for="url in bannerArr">
          <img :src="url.url">
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-main>
  <el-row :gutter="10">
   <el-col :span="6" v-for="p in productArr">
     <el-card style="padding-bottom: 20px">
       <img :src="p.url" alt="">
       <p>{{p.title}}</p>
       <div>
         <span style="float: left">
           ￥{{p.price}} <s>{{p.oldPrice}}</s>
         </span>
         <span style="float: right"> 销量:{{p.saleCount}}</span>
       </div>
     </el-card>
   </el-col>
  </el-row>

</template>

<script setup>
const productArr = [
  {url:'imgs/a.jpg',price: 100,oldPrice: 200,title: '军大衣',saleCount: 1000},
    {url:'imgs/b.jpg'},
    {url:'imgs/c.jpg'},
    {url:'imgs/d.jpg'},
    {url:'imgs/e.jpg'},
    {url:'imgs/f.jpg'},
    {url:'imgs/g.jpg'},
    {url:'imgs/h.jpg'},
    {url:'imgs/i.jpg'},
    {url:'imgs/j.jpg'},
    {url:'imgs/k.jpg'},
    {url:'imgs/l.jpg'},
]
const bannerArr = [
    {url: 'imgs/banner1.jpg'},
    {url: 'imgs/banner2.jpg'},
    {url: 'imgs/banner3.jpg'},
    {url: 'imgs/banner4.jpg'},

]
</script>

<style scoped>

</style>